<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar
      title="我的课程"
      left-text=""
      left-arrow
      :border="false"
      @click-left="onClickLeft"
    />
    <!-- tab面板 -->
    <van-tabs v-model="activeName" color="#000">
      <van-tab title="待上课" name="1">
        <div class="container">
          <img src="../../assets/img/Group 2 Copy@2x.png" alt="" />
          <p>没有更多课程了</p>
        </div>
      </van-tab>
      <van-tab title="待评价" name="2">
        <div class="container">
          <img src="../../assets/img/Group 2 Copy@2x.png" alt="" />
          <p>没有更多课程了</p>
        </div>
      </van-tab>
      <van-tab title="已完成" name="3">
        <div class="container">
          <img src="../../assets/img/Group 2 Copy@2x.png" alt="" />
          <p>没有更多课程了</p>
        </div>
      </van-tab>
      <van-tab title="已旷课" name="4">
        <div class="container">
          <img src="../../assets/img/Group 2 Copy@2x.png" alt="" />
          <p>没有更多课程了</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
    };
  },

  methods: {
    onClickLeft() {
      this.$router.push("/sport");
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-icon-arrow-left::before {
  color: rgb(127, 127, 127);
  font-size: 20px;
}
/deep/.van-nav-bar__title {
  font-size: 14px;
}
/deep/.van-tab__text--ellipsis {
  font-size: 16px;
  color: rgb(178, 178, 178);
}
/deep/.van-tabs__wrap {
  border-bottom: 3px solid rgb(252, 252, 252);
}

.container {
  margin-top: 40px;
  text-align: center;
  img {
    width: 200px;
  }
  p {
    font-size: 12px;
    color: rgb(153, 153, 153);
  }
}
</style>